<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <table class="table table-bordered table-hover">
                <caption class="h2">购物车</caption>
                <tr>
                    <th>全选 <input type="checkbox"></th>
                    <th width="300">商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(product, index) in products">
                    <td><input type="checkbox" v-model="product.isCheck"></td>
                    <td>
                        <img :src="product.productImg" alt="" style="float: left">
                        <h5>{{product.productName}}</h5>
                    </td>
                    <td>
                        {{product.price}}
                    </td>
                    <td>
                        <input type="number" v-model.number="product.count">
                    </td>
                    <td>
                        <!-- 过滤器 原数据不变的情况下， 改变显示效果。 | 管道符 -->
                        {{ product.price * product.count | toFixedFilter(2) }}
                    </td>
                    <td>
                        <button class="btn btn-danger" @click="removeItem(product)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        filters: {
            // 可以有好多过滤器
            // 这里的this 指向 window
            // 过滤器第一个参数（value）是 管道符前边的值， 第二个参数（params）是过滤器的参数（即 toFixed() 的参数）. 可以传多个参数
            toFixedFilter(value, params) {
                return value.toFixed(params)
            }

        },
        data() {
            return {
                products: []
            }
        },

        created() {
            this.getList()
        },
        methods: {
            getList() {
                axios.get('./json/carts.json')
                    .then(res => {
                        console.log(res);
                        this.products = res.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            removeItem(value) {
                // value 代表当前点击的这一项 [1,2,3,4,5, value]
                // value逐个 进行比较 不相等的 留下 相等的剔除
                // 在这里不用splice的原因是性能浪费 容易造成数组塌陷 每次删除需要让数组下标减减
                console.log(value);
                this.products = this.products.filter(item => item !== value)
            }
        }
    })
</script>
</body>
</html>
